<script setup>
//接收user传过来的数据
import getDate from '@/utils/dateChange.js'
import {ref, watch} from 'vue'
import useArticleStore from "@/store/article/index.js";

const articleStore = useArticleStore()

//定义user数据接收器
defineProps({
  userList: {
    type: Object,
    default: () => ({})
  }
})

//定义分页器
const page = ref(1)
const size = ref(10)

//size大小切换
const handleSizeChange = () => {
  articleStore.getArticleUserListAction(page.value, size.value)
}

//当前页切换
const handleCurrentChange = () => {
  articleStore.getArticleUserListAction(page.value, size.value)
}

//启用
const enableUserBtn = async (userId) => {

  await articleStore.statusAction(userId, 0)
  await articleStore.getArticleUserListAction(page.value, size.value)
}

//禁用
const stopUserBtn = async (userId) => {

  await articleStore.statusAction(userId, 1)
  await articleStore.getArticleUserListAction(page.value, size.value)
}


</script>

<template>
  <div class="content">


    <!--    表格内容-->
    <el-table
        @selection-change="handleSelectionChange"
        ref="tableRef"
        :data="userList.records"
        style="width: 100%"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column align="center" property="id" label="用户编号" width="80"/>
      <el-table-column align="center" property="name" label="用户名称" width="120"/>
      <el-table-column align="center" property="phone" label="手机号"/>
      <el-table-column align="center" property="status" label="状态" width="100px">
        <template #default="scope">
          <el-button :type="scope.row.status ? 'danger' : 'primary'" plain text="text">
            {{ !scope.row.status ? '正常' : '锁定' }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" property="createTime" label="创建时间">
        <template #default="scope">
          {{ getDate(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template #default="scope">
          <el-popconfirm v-if="scope.row.status===0" @confirm="stopUserBtn(scope.row.id)"
                         title="确定要禁用该用户吗?">
            <template #reference>
              <el-button type="danger" plain>禁用</el-button>
            </template>
          </el-popconfirm>

          <el-popconfirm v-else @confirm="enableUserBtn(scope.row.id)" title="确定要启用该用户吗?">
            <template #reference>
              <el-button type="danger">启用</el-button>
            </template>
          </el-popconfirm>
        </template>

      </el-table-column>
    </el-table>

    <!-- 分页器      -->
    <el-pagination
        v-model:current-page="page"
        v-model:page-size="size"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userList.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped lang="less">
.content {
  padding: 0 15px 0 15px;

  .header {
    margin-bottom: 10px;
  }

  .el-pagination {
    margin-top: 20px;
  }
}
</style>
